// 上面这个代码处理过度动画（默认加上不用管）
document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    document.body.classList.add('sidenav-pinned')
    document.body.classList.add('ready')
  }, 200)
})

// axios相关的配置
// 请求根路径
axios.defaults.baseURL = 'http://ajax-api.itheima.net'

// 添加请求拦截器
// 应用场景: 统一配置token令牌
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 目标: 在请求拦截器中添加token, 设置请求头
  // console.log('请求拦截器', config);
  // 1. 获取token
  const token = localStorage.getItem('token-105')
  // 2. 给headers添加对应的属性
  if (token) config.headers.Authorization = token
  

  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
// 应用场景: 
// 1. 处理token验证失败的情况 --- 401
// 2. 数据剥离
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  // 接口返回的数据是正常的 --- 状态码 2开头
  console.log('响应拦截器', response);
  return response.data;
}, function (error) {
  // 对响应错误做点什么 --- 状态码 4开头 5开头
  // 错误的场景 (1) token没有 (2) token失效  -- 401状态码
  // 解决方案: (1) 移出登录状态 (2) 回到登录页
  if (error.response.status === 401) {
    // token验证失败
    localStorage.removeItem('token-105')
    localStorage.removeItem('username-105')
    location.href = './login.html'
  }
  console.dir(error);
  return Promise.reject(error);
});


// 用户名展示 + 退出登录
// 用户名展示: 
// 1. 找对象
// 2. 判断是否有这个对象 
// 3. innerHTML 修改用户名
const username = document.querySelector('#username')

if (username) {
  username.innerHTML = localStorage.getItem('username-105')
}
// 退出登录
// 1. 找对象
// 2. 判断是否有该对象
// 3. 注册点击事件
// 3.1 清除本地登录状态 - token + username
// 3.2 回到登录页
const logout = document.querySelector('#logout')
if (logout) {
  logout.addEventListener('click', function() {
    localStorage.removeItem('username-105')
    localStorage.removeItem('token-105')
    // 错误的 --> 路径不对, 不要参考js和login的关系, 而是引入当前js的文件 - index.html和login.html的关系
    // location.href = '../login.html'
    location.href = './login.html'
  })
}



// 轻提示组件封装
// 1. 找到dom对象
const toastBox = document.querySelector('#myToast')
// 2. 创建一个toast的实例对象
// const toast = new bootstrap.Toast(dom对象, 配置项)
const toast = new bootstrap.Toast(toastBox, {
  animation: true,  // 是否开启过渡动画
  autohide: true,   // 是否开启自动隐藏 
  delay: 1500       // 延时时间
})
// 3. 显示toast轻提示组件
// 4. 封装一个tip组件 - 实现文本自定义
const tip = (msg) => {
  document.querySelector('.toast-body').innerHTML = msg
  toast.show()
}